'use client';

import React, { useRef } from 'react';
import { type CustomEquipment } from '@/lib/core/config';
import { useEquipmentList } from '@/lib/equipment/useEquipmentList';
import { useScrollToSelected } from '@/lib/equipment/useScrollToSelected';
import { type SettingsOptions } from '@/components/settings/Settings';

interface EquipmentCategoryBarProps {
  selectedEquipment: string | null;
  customEquipments: CustomEquipment[];
  onEquipmentSelect: (equipmentId: string) => void;
  settings?: SettingsOptions;
}

// TabButton 组件 - 与导航栏样式完全一致
interface TabButtonProps {
  tab: string;
  isActive: boolean;
  onClick?: () => void;
  dataTab?: string;
}

const TabButton: React.FC<TabButtonProps> = ({
  tab,
  isActive,
  onClick,
  dataTab,
}) => {
  const baseClasses =
    'text-xs font-medium tracking-widest whitespace-nowrap pb-3';
  const stateClasses = isActive
    ? 'text-neutral-800 dark:text-neutral-100'
    : 'cursor-pointer text-neutral-500 dark:text-neutral-400';

  const indicatorClasses = `absolute -bottom-3 left-0 right-0 z-10 h-px bg-neutral-800 dark:bg-neutral-100 ${
    isActive ? 'opacity-100 w-full' : 'opacity-0 w-0'
  }`;

  return (
    <div
      onClick={onClick}
      className={`${baseClasses} ${stateClasses}`}
      data-tab={dataTab}
    >
      <span className="relative inline-block">
        {tab}
        <span className={indicatorClasses} />
      </span>
    </div>
  );
};

const EquipmentCategoryBar: React.FC<EquipmentCategoryBarProps> = ({
  selectedEquipment,
  customEquipments,
  onEquipmentSelect,
  settings,
}) => {
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  // 使用自定义Hook管理器具列表
  const { allEquipments } = useEquipmentList({
    customEquipments,
    settings,
  });

  // 使用自定义Hook管理滚动
  useScrollToSelected({
    selectedItem: selectedEquipment,
    containerRef: scrollContainerRef,
  });

  // 构建所有项目数据
  const allItems = allEquipments.map(equipment => ({
    type: 'equipment' as const,
    id: equipment.id,
    name: equipment.name,
    isSelected: selectedEquipment === equipment.id,
    isCustom: ('isCustom' in equipment && equipment.isCustom) || false,
    onClick: () => onEquipmentSelect(equipment.id),
  }));

  return (
    <div className="relative mb-3 w-full overflow-hidden">
      <div
        ref={scrollContainerRef}
        className="flex items-center gap-4 overflow-x-auto border-b border-neutral-200 dark:border-neutral-800"
        style={{
          scrollbarWidth: 'none',
          msOverflowStyle: 'none',
          WebkitOverflowScrolling: 'touch',
        }}
      >
        <style jsx>{`
          div::-webkit-scrollbar {
            display: none;
          }
        `}</style>

        {allItems.map(item => (
          <div key={item.id} className="flex flex-shrink-0 items-center">
            <div className="relative flex items-center whitespace-nowrap">
              <TabButton
                tab={item.name}
                isActive={item.isSelected}
                onClick={item.onClick}
                dataTab={item.id}
              />
            </div>
          </div>
        ))}

        {/* 右侧渐变效果 - 当器具过多时显示 */}
        {allItems.length > 3 && (
          <div className="pointer-events-none absolute top-0 right-0 h-full w-5 bg-gradient-to-l from-neutral-50/95 to-transparent dark:from-neutral-900/95" />
        )}
      </div>
    </div>
  );
};

export default EquipmentCategoryBar;
